<template>
  <el-container class="tableReviewContainer" >
    <el-header>
        <h3>{{reportName}}</h3>
    </el-header>
    <el-main  style="height:100%">

        <div style="height:100%" ref="tableContainer">
        </div>
    </el-main>
  </el-container>
</template>

<script>
import Vue from "vue";
export default {
  props: ["templateConf", "relations", "reportData", "reportName"],

  data() {
    return {
      inited: false,
      global_chart: "",
      tableData: []
    };
  },
  methods: {
    displayReport() {
      if (this.relations) {
        let optionJs = this.templateConf.templateOptionJs;

        let operFunc = eval("(" + optionJs + ")");

        let result = operFunc("", "", this.relations, this.tableData);

        if (result) {
          this.$refs.tableContainer.innerHTML = result;
        }
      }
    }
  },
  watch: {
    reportData(nv, ov) {
      this.tableData = this.reportData;

      this.displayReport();
    }
  }
};
</script>

<style scoped>
.tableReviewContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tableReviewContainer >>> table {
  min-width: 100%;
  border-collapse: collapse;

  margin: 0 auto;

  text-align: center;
}

.tableReviewContainer >>> table td,
table th {
  border: 1px solid #cad9ea;

  color: #666;

  height: 30px;
}

.tableReviewContainer >>> table thead th {
  background-color: #cce8eb;

  width: 100px;
}

.tableReviewContainer >>> table tr:nth-child(odd) {
  background: #fff;
}

.tableReviewContainer >>> table tr:nth-child(even) {
  background: #f5fafa;
}
</style>
